<template>
    <div>
        <Form ref="searchForm" :model="searchForm" @keydown.enter.native="handleSearch">
            <Row>
                <Col span="8">
                    <FormItem label="产品继承类型" prop="productInheritanceType" :label-width="100">
                        <RadioGroup v-model="searchForm.productInheritanceType" @on-change="selectRadio">
                            <Radio label="01">模板</Radio>
                            <Radio label="02">原型</Radio>
                        </RadioGroup>
                    </FormItem>
                </Col>
                <div v-if="searchForm.productInheritanceType=='01'">
                    <Col span="8">
                        <Form-item label="产品模板编号" prop="templateNumber" :label-width="100">
                            <Input type="text" v-model="searchForm.templateNumber" clearable placeholder="请输入产品模板编号"
                                   style="width: 200px"/>
                        </Form-item>
                    </Col>
                    <Col span="8">
                        <Form-item label="产品模板名称" prop="templateName" :label-width="100">
                            <Input type="text" v-model="searchForm.templateName" clearable placeholder="请输入产品模板名称"
                                   style="width: 200px"/>
                        </Form-item>
                    </Col>
                </div>
                <div v-if="searchForm.productInheritanceType=='02'">
                    <Col span="8">
                        <Form-item label="产品原型编号" prop="productNumber" :label-width="100">
                            <Input type="text" v-model="searchForm.productNumber" clearable placeholder="请输入产品原型编号"
                                   style="width: 200px"/>
                        </Form-item>
                    </Col>
                    <Col span="8">
                        <Form-item label="产品原型名称" prop="productName" :label-width="100">
                            <Input type="text" v-model="searchForm.productName" clearable placeholder="请输入产品原型名称"
                                   style="width: 200px"/>
                        </Form-item>
                    </Col>
                </div>
            </Row>
            <Row>
                <Col span="24">
                    <Form-item style="text-align: center;">
                        <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                        &nbsp;&nbsp;
                        <Button @click="handleReset" type="primary" icon="ios-trash">重置</Button>
                    </Form-item>
                </Col>
            </Row>
        </Form>
        <Row>
            <Alert show-icon>
                已选择 <span class="select-count">{{selectCount}}</span> 项
                <a class="select-clear" @click="clearSelectAll">清空</a>
            </Alert>
        </Row>
        <div v-if="searchForm.productInheritanceType=='01'">
            <Row>
                <Table :loading="loading" border :columns="columns" :data="data"
                       @on-selection-change="showSelect" ref="table">
                </Table>
            </Row>
        </div>
        <div v-if="searchForm.productInheritanceType=='02'">
            <Row>
                <Table :loading="loading" border :columns="columnsPrototype" :data="data"
                       @on-selection-change="showSelect" ref="table">
                </Table>
            </Row>
        </div>
        <Row type="flex" justify="end" class="page">
            <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
                  @on-change="changePage" @on-page-size-change="changePageSize"
                  :page-size-opts="[10,20,50]"
                  size="small" show-total show-elevator show-sizer></Page>
        </Row>
        <Row class="operation" style="text-align: center;">
            <Button @click="next" type="primary" icon="md-fastforward">下一步</Button>
            &nbsp;&nbsp;
            <Button @click="cancel" type="primary" icon="md-rewind">取消</Button>
        </Row>
    </div>
</template>
<script>
    import circleLoading from "_c/circle-loading/circle-loading.vue";
    import {
        getListProductTemplate
    } from "@/projects/afs-core-business/api/afs-product/product/product";
    import {
        queryProductPrototypeList,
    } from "@/projects/afs-core-business/api/afs-product/product/productPrototype";

    export default {
        name: "scheme-selection",
        components: {
            circleLoading
        },
        data() {
            return {
                loading: false,
                productInheritanceType: '01',
                selectCount: 0,
                selectList: [],
                searchForm: {
                    productInheritanceType: "01",
                    templateNumber: "",
                    templateName: "",
                    productNumber: "",
                    productName: "",
                    pageNumber: 1,
                    pageSize: 10,
                },
                columns: [
                    {
                        type: "selection",
                        minWidth: 60,
                        maxWidth: 60,
                        align: "center",
                        fixed: "left"
                    },
                    {
                        title: "产品模板编号",
                        key: "templateNumber",
                        minWidth: 120,
                        fixed: "left"
                    },
                    {
                        title: "产品模板名称",
                        key: "templateName",
                        minWidth: 145,
                        fixed: "left",
                        ellipsis: true,
                        tooltip: true
                    }
                ],
                columnsPrototype: [
                    {
                        type: "selection",
                        minWidth: 60,
                        maxWidth: 60,
                        align: "center",
                        fixed: "left"
                    },
                    {
                        title: "产品原型编号",
                        key: "productNumber",
                        minWidth: 120,
                        fixed: "left"
                    },
                    {
                        title: "产品原型名称",
                        key: "productName",
                        minWidth: 145,
                        fixed: "left",
                        ellipsis: true,
                        tooltip: true
                    }
                ],
                data: [],
                total: 0
            };
        },
        methods: {
            selectRadio() {
                this.productInheritanceType = this.searchForm.productInheritanceType;
                this.clearSelectAll();
                this.handleSearch()
            },
            getListData() {
                console.info("查询类型"+this.productInheritanceType);
                this.searchForm.isEffective = '1';
                this.searchForm.status = '2';
                let parms = {
                    pageNumber: this.searchForm.pageNumber,
                    pageSize: this.searchForm.pageSize,
                    condition: this.searchForm
                }
                this.loading = true;
                if ('01' == this.productInheritanceType) {
                    getListProductTemplate(parms).then(res => {
                        this.loading = false;
                        if (res.code === "0000") {
                            this.data = res.data.records;
                            this.total = res.data.total;
                        }
                    }).catch(() => {
                        this.loading = false;
                    });
                } else if ('02' == this.productInheritanceType) {
                    queryProductPrototypeList(parms).then(res => {
                        this.loading = false;
                        if (res.code === "0000") {
                            this.data = res.data.records;
                            this.total = res.data.total;
                        }
                    }).catch(() => {
                        this.loading = false;
                    });
                } else {
                    this.loading = false;
                }
            },
            showSelect(e) {
                this.selectList = e;
                this.selectCount = e.length;
            },
            changePage(v) {
                this.clearSelectAll();
                this.searchForm.pageNumber = v;
                this.getListData();
            },
            clearSelectAll() {
                this.$refs.table.selectAll(false);
            },
            changePageSize(v) {
                this.searchForm.pageSize = v;
                this.getListData();
            },
            handleSearch() {
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.getListData();
            },
            handleReset() {
                this.$refs.searchForm.resetFields();
                this.searchForm.productInheritanceType = this.productInheritanceType;
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                // 重新加载数据
                this.getListData();
            },
            next() {
                if (this.selectCount <= 0) {
                    this.$Message.warning("您还未选择数据！");
                    return;
                } else if (this.selectCount > 1) {
                    this.$Message.warning("您只能选择一笔数据！");
                    return;
                }
                let id = null;
                let productTemplateId = null;
                let templateCategory = null;
                this.selectList.forEach((e) => {
                    if ("02" == this.productInheritanceType) {
                        id = e.id
                        productTemplateId = e.productTemplateId;
                        templateCategory = e.templateCategory;
                    } else {
                        productTemplateId = e.id;
                        templateCategory = e.templateCategory;
                    }
                });
                this.$emit("next", {
                    status: '1',
                    productInheritanceType: this.productInheritanceType,
                    productTemplateId: productTemplateId,
                    id: id,
                    templateCategory: templateCategory
                });
            },
            cancel() {
                this.$emit('backPage', "退回")
            }
        },
        mounted() {
            this.handleSearch();
        }
    };
</script>
<style scoped>
    .common_br {
        background-color: #f7f7f7;
        border-radius: 3px;
        border: 1px solid #dcdee2;
    }

    .common_content {
        background-color: white;
        padding: 16px;
    }
</style>
